<!-- @module biz-travel -->
<!-- @author: YunTao.Li -->
<!-- @description: 出差申请单变更 -->
<!-- @since: 2019-11-06 23:43:56 -->
<template>
  <el-card  class="box-card el-card-flex" >
    <div slot="header" class="clearfix">
    <span>
        <i class="el-icon-position"></i>
         查询信息
      </span>
    </div>
    <!-- form begin -->
    <div style="margin: 10px" >
    <el-form ref="queryForm" label-width="120px" class="div-header" :model="queryForm" size="mini">
        <el-row :gutter="10">
          <el-col :xs="24" :sm="8" :md="8" :lg="8" :xl="8">
            <el-form-item label="组织" prop="orgCode">
              <OrgSelectTree v-model="queryForm.orgCode" placeholder="组织" style="width: 240px" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="8" :md="8" :lg="8" :xl="8">
            <el-form-item label="单据编号" prop="bizTravelCode">
              <el-input v-model="queryForm.bizTravelCode" placeholder="单据编号" style="width: 240px" />
            </el-form-item>
          </el-col>
          <!-- <el-col :xs="24" :sm="8" :md="8" :lg="8" :xl="8">
            <el-form-item label="审批状态" prop="businessStatus">
              <el-input v-model="queryForm.businessStatus" placeholder="审批状态" />
            </el-form-item>
          </el-col> -->
        </el-row>
        <div class="btnStyle">
          <el-button
            type="primary"
            icon="el-icon-search"
            size="small"
            @click="getList()"
          >查询</el-button>
          <el-button
            type="primary"
            size="small"
            icon="el-icon-refresh"
            @click="resetForm('queryForm')"
          >重置</el-button>
        </div>
    </el-form>
    </div>

    <!-- form end -->
      <div class="div-button">
        <el-button
          icon="el-icon-menu"
          type="warning"
          :disabled.sync="btn_change_disabled"
          size="small"
          @click="onChange"
        >变 更</el-button>
      </div>


      <!-- table begin-->
      <div class="el-flex el-box-column " style="margin: 10px;">
        <el-card class="box-card el-card-flex" >
        <div slot="header" class="clearfix">
        <span>
        <i class="el-icon-position"></i>
          因事外出变更
        </span>
        </div>

        <div class="el-flex el-box-column" style="margin: 5px;" >
          <el-table v-loading="listLoading" :data="leaveList" border fit
                    highlight-current-row class="tableStyle" height="100%"
                    style="width: 100%"
                    @selection-change="onSelectChange">

            <el-table-column type="selection" width="55" />
            <el-table-column align="center" type="index" width="55" label="序号" />
            <el-table-column align="center" label="单据编号" min-width="150px">
              <template slot-scope="scope">
                <span>{{ scope.row.bizTravelCode }}</span>
              </template>
            </el-table-column>
            <!--预计起始时间-->
            <el-table-column  align="center" label="预计起始时间" min-width="120px">
              <template slot-scope="scope">
                <span>{{ scope.row.startDate | parseTime('{y}-{m}-{d}') }}</span>
              </template>
            </el-table-column>
            <!--预计开始时段-->
            <el-table-column prop="startTimeType" :formatter="dictFormatter" label-class-name="timeType" align="center" label="预计开始时段" min-width="100px">
              <!-- <template slot-scope="scope">
                <span>{{ scope.row.startTimeType }}</span>
              </template> -->
            </el-table-column>
            <!--预计终止时间-->
            <el-table-column  align="center" label="预计终止时间" min-width="120px">
              <template slot-scope="scope">
                <span>{{ scope.row.endDate | parseTime('{y}-{m}-{d}') }}</span>
              </template>
            </el-table-column>
            <!--预计终止时段-->
            <el-table-column prop="endTimeType" :formatter="dictFormatter" label-class-name="timeType" align="center" label="预计终止时段" min-width="100px">
              <!-- <template slot-scope="scope">
                <span>{{ scope.row.endTimeType }}</span>
              </template> -->
            </el-table-column>
            <!--审批状态-->
            <el-table-column prop="businessStatus" :formatter="dictFormatter" label-class-name="businessStatus"  label="审批状态" align="center" min-width="100px"/>
            <!--出差事由-->
            <el-table-column align="center" label="出差事由" min-width="250px">
              <template slot-scope="scope">
                <span>{{ scope.row.travelDesc }}</span>
              </template>
            </el-table-column>
            <!--实际起始时间-->
            <el-table-column  align="center" label="实际起始时间" min-width="150px">
              <template slot-scope="scope">
                <span>{{ scope.row.actualStartDate | parseTime('{y}-{m}-{d}') }}</span>
              </template>
            </el-table-column>
            <!--实际开始时段-->
            <el-table-column align="center" label="实际开始时段" min-width="100px">
              <template slot-scope="scope">
                <span>{{ scope.row.actualStartTimeType }}</span>
              </template>
            </el-table-column>
            <!--实际终止时间-->
            <el-table-column  align="center" label="实际终止时间" min-width="150px">
              <template slot-scope="scope">
                <span>{{ scope.row.actualEndDate | parseTime('{y}-{m}-{d}') }}</span>
              </template>
            </el-table-column>
            <!--实际终止时段-->
            <el-table-column align="center" label="实际终止时段" min-width="100px">
              <template slot-scope="scope">
                <span>{{ scope.row.actualEndTimeType }}</span>
              </template>
            </el-table-column>
            <!--变更事由-->
            <el-table-column align="center" label="变更事由" min-width="80px">
              <template slot-scope="scope">
                <span>{{ scope.row.changeDesc }}</span>
              </template>
            </el-table-column>

          </el-table>
        </div>
      <!-- table end -->
      <pagination background
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="total" :page.sync="queryForm.page"
                  :limit.sync="queryForm.limit" @pagination="getList" />

    </el-card>
      <travelChangeForm ref="travelInputDialog" @submitFunc="onSubmitForm" />
  </div>
  </el-card>
</template>

<script>
import { travelList, travelChange } from '@/api/attendance/travel-service'
import Pagination from '@/components/Pagination' // secondary package based on el-pagination
import travelChangeForm from './components/form/travel-change-form'
import OrgSelectTree from './components/combo/org-tree-select.vue'

export default {
  components: { Pagination, travelChangeForm, OrgSelectTree },
  data() {
    return {
      msg: '-',
      text_form: '查询信息',
      text_grid: '因事外出变更',
      btn_change_disabled: false,
      leaveList: [],
      listLoading: true,
      total: 0,
      selectedLength: 0,
      lastSelectedData: null,
      queryForm: {
        page: 1,
        limit: 20,
        ouId: '',
        bizTravelCode: '',
        businessStatus: 'E'
      }, inputRules: {
      },
      height: 'calc(100% - 16px)'
    }
  },
  created() {
    // 初始化查询展示
    this.getList()
    // 初始化按钮diabled状态
    this.onSelectChange({})

    this.queryForm.orgCode = localStorage.getItem('orgCode')
  },
  methods: {
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    getList() {
      this.listLoading = true
      travelList(this.queryForm).then(response => {
        this.leaveList = response.data.records

        this.total = response.data.total

        // 假loading 1秒后消失
        setTimeout(() => {
          this.listLoading = false
        }, 300)
      })
    },
    inputFormToggle(data) {
      this.$refs.travelInputDialog.toggele(data)
    },
    handleChange(data) { // 编辑方法
      travelChange(data.bizTravelId, data)
        .then(response => {
          if (response.code === 200) {
            this.getList()
            // 清理子组件
            this.$refs.travelInputDialog.$refs.travelInputForm.resetFields()
          } else {
            this.$message.error(response.message)
          }
        })
    },
    onChange() {
      const travelData = JSON.parse(JSON.stringify(this.lastSelectedData))
      this.inputFormToggle(travelData)
    },
    onSubmitForm(data) { // 表单提交事件
      this.handleChange(data)
    },
    onSelectChange(selection) {
      this.selectedLength = selection.length || 0
      this.lastSelectedData = selection[this.selectedLength - 1]
      this.btn_change_disabled = true

      // 控制按钮是否可用行为
      if (this.selectedLength && this.selectedLength > 1) {
        this.btn_change_disabled = true
      } else if (this.selectedLength && this.selectedLength === 1) {
        this.btn_change_disabled = false
      } else {
        //
      }
    }
  }
}
</script>

<style scoped lang="scss">
@import "./index.scss";
</style>
